import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Switch, Popconfirm, Button } from 'antd'
import { createContainer } from 'utils/hoc'
import ContentBox from 'components/contentBox'
// import Filters from 'components/common/filters'
import CustomTable from 'components/common/table'
import Authorized from 'components/common/authorized'
import SetAuthModal from './com/setAuthModal'
import EditModal from './com/editModal'
import AddModal from './com/addModal'
import PropTypes from 'prop-types'

// import { widgetType, PAGE_SIZE } from 'constants'
import Style from './index.css'

class index extends Component {
  static propTypes = {
    rolesData: PropTypes.object,
    getRoles: PropTypes.func,
    delRole: PropTypes.func,
    editRole: PropTypes.func,
    addRole: PropTypes.func,
    getAuthTree: PropTypes.func,
    getAuth: PropTypes.func,
    authTree: PropTypes.array,
    roleAuth: PropTypes.array,
    setAuth: PropTypes.func
  }
  constructor (props) {
    super(props)
    this.state = {
      showSetAuthModal: false,
      showEditModal: false,
      showAddModal: false,
      currentRow: {}
    }
  }

  componentDidMount () {
    this.initData()
    this.props.getAuthTree()
  }

  initData = () => {
    const { pageNo, pageSize } = this.state
    this.props.getRoles({
      pageNo,
      pageSize
    })
  }

  getTableCols = () => {
    return [
      {
        title: '角色编号',
        dataIndex: 'code'
      },
      {
        title: '角色名称',
        dataIndex: 'name'
      },
      {
        title: '角色描述',
        dataIndex: 'remark'
      },
      {
        title: '状态',
        dataIndex: 'enabledFlag',
        render: (text, row) => <Switch defaultChecked={text === 1} onChange={() => this.handleUpdate(row)} />
      },
      {
        title: '操作',
        // key: 'roleId',
        render: (text, record) => {
          return <>
            <div>
              {/* <a className={Style['a-btn']} onClick={() => this.handleRestore(record.userId)}>部门设置</a> */}
              <a className={Style['a-btn']} onClick={() => this.handleEditAuth(record)}>权限配置</a>

              <a className={Style['a-btn']} onClick={() => this.handleEdit(record)}>编辑</a>

              <Authorized auth='SETTING:RULES:ROLE:DEL'>
                <Popconfirm placement='top' title='确认是否删除角色' onConfirm={() => this.handleDelete(record.roleId)}>
                  <a className={Style['a-btn']}>删除</a>
                </Popconfirm>
              </Authorized>
            </div>
          </>
        }
      }
    ]
  }

  handleEditAuth = record => {
    this.props.getAuth({
      roleId: record.roleId
    })
    this.setState({
      currentRow: record,
      showSetAuthModal: true
    })
  }

  handleEdit = record => {
    this.setState({
      showEditModal: true,
      currentRow: record
    })
  }

  handleEditConfirm = form => {
    this.props.editRole({
      roleId: this.state.currentRow.roleId,
      ...form
    }).then(() => {
      // this.setState({
      //   showEditModal: false
      // })
      this.initData()
    })
  }

  handleAdd = () => {
    this.setState({
      showAddModal: true
    })
  }

  handleAddConfirm = form => {
    this.props.addRole(form).then(() => {
      this.setState({
        showAddModal: false
      })
      this.initData()
    })
  }

  handleDelete = roleId => {
    this.props.delRole({ roleId }).then(() => {
      this.initData()
    })
  }

  handleUpdate = (row) => {
    // TODO 接口没有
    this.props.editRole({
      roleId: row.roleId,
      enabledFlag: row.enabledFlag === 1 ? 0 : 1
    }).then(() => {
      this.initData()
    })
  }

  onPageChange = (pageNo, pageSize) => {
    this.setState({
      pageNo
    })
    this.initData()
  }

  onShowSizeChange = (current, pageSize) => {
    this.setState({
      pageSize
    })
    this.initData()
  }

  confirmAddAuth = menuIds => {
    const { currentRow } = this.state
    this.props.setAuth({
      roleId: currentRow.roleId,
      menuIds
    }).then(() => {
      this.setState({
        showSetAuthModal: false
      })
      this.initData()
    })
  }

  render () {
    const { pageNo, pageSize, showSetAuthModal, showEditModal, showAddModal, currentRow } = this.state
    const { rolesData } = this.props
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: rolesData && rolesData.totalCount,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange
    }
    return (
      <>
        <ContentBox>
          <div >
            <div className={Style['table-title']}>
              <div className={Style['title']}>数据列表</div>
              <Button type='primary' onClick={this.handleAdd}>添加</Button>
            </div>
            {/* <Filters cols={this.getFilterCols()} form={form} search={this.search} reset={this.reset} /> */}
            <CustomTable
              rowKey='roleId'
              loading={false}
              columns={this.getTableCols()}
              dataSource={(rolesData && rolesData.list) || []}
              pagination={pagination}
            />
          </div>
          <SetAuthModal visible={showSetAuthModal} onCancel={() => this.setState({ showSetAuthModal: false })} tree={this.props.authTree} auth={this.props.roleAuth} onOk={this.confirmAddAuth} />
          <EditModal visible={showEditModal} onCancel={() => this.setState({ showEditModal: false })} onOk={this.handleEditConfirm} data={currentRow} />
          <AddModal visible={showAddModal} onCancel={() => this.setState({ showAddModal: false })} onOk={this.handleAddConfirm} />
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  rolesData: state.setup.rolesData,
  authTree: state.setup.authTree,
  roleAuth: state.setup.roleAuth
})
const mapDispatch = dispatch => ({
  login: dispatch.common.createLogin,
  getRoles: dispatch.setup.getRoles,
  delRole: dispatch.setup.delRole,
  editRole: dispatch.setup.editRole,
  addRole: dispatch.setup.addRole,
  getAuthTree: dispatch.setup.getAuthTree,
  getAuth: dispatch.setup.getAuth,
  setAuth: dispatch.setup.setAuth
})

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(index)
)
